<!-- 模态框，弹窗 -->
<template>
    <div>
        <up-modal :width="props.modalWidth" :show="props.modalShow" :title="props.modalTitle" :showConfirmButton="false"
            :mask-close-able="true">
            <div class="modalText">
                <image v-if="props.showImage" src="@/static/images/logo.png" alt="" />
                <div class="textBox">
                    <span>{{ props.modalText1 }}</span>
                </div>
                <div class=inputBox v-if="props.isInput">
                    <up-input type="text" v-model="props.inputText" :placeholder="props.inputTitle" clearable
                        @update:modelValue="handleInput" />
                </div>
                <!-- 用户协议确认框 -->
                <div class="agreementText" v-if="props.isAgreement">
                    <span>{{ $t('thankyou1') }}<span class="textBtn" @click="toAgreement">{{ $t('UserAgreement')
                    }}</span><span class="textBtn" @click="toPolicy">{{ $t('PrivacyPolicy') }}</span>。
                        {{ $t('thankyou2') }}</span>
                </div>
                <!-- 用户协议二次确认框 -->
                <div class="agreementText" v-if="props.isAgreement2">
                    <span>{{ $t('thankyou3') }}<span class="textBtn" @click="toAgreement">{{ $t('UserAgreement')
                    }}</span>{{ $t('and') }}<span class="textBtn" @click="toPolicy">{{ $t('PrivacyPolicy')
                            }}</span>{{
                                $t('thankyou4') }}</span>
                </div>
                <div class="btnList">
                    <u-button size="small" style="margin-top: 30rpx;background-color: #bbbbbb;" v-if="isCancel" type=""
                        :text="cancelText" @click="cancel"></u-button>
                    <u-button size="small" style="margin-top: 30rpx;" type="" :text="cloosBtnText2"
                        @click="cloos"></u-button>
                </div>
            </div>
        </up-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, computed } from 'vue';
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const props = defineProps({
    modalTitle: {
        type: String,
        default: '',
    },
    modalWidth: {// 宽度
        type: String,
        default: '450rpx',
    },
    modalText1: {// 弹窗的内容
        type: String,
        default: '',
    },
    isInput: {// 是否有输入框
        type: Boolean,
        default: false
    },
    inputText: {// 输入框内容
        type: String,
        default: '',
    },
    inputTitle: {// 输入框提示词
        type: String,
        default: '',
    },
    modalShow: {// 弹窗是否显示
        type: Boolean,
        default: false,
    },
    showImage: {
        type: Boolean,
        default: false,
    },
    isCancel: {// 是否显示取消按钮
        type: Boolean,
        default: false,
    },
    textCancel: {// 取消按钮文字
        type: String,
        default: ''
    },
    isAgreement: {// 是否为隐私协议
        type: Boolean,
        default: false,
    },
    isAgreement2: {// 是否为隐私协议2
        type: Boolean,
        default: false,
    },
    cloosBtnText: {// 确定按钮文字
        type: String,
        default: '',
    },
})
const cancelText = computed(() => props.textCancel || t('cancel'))
const cloosBtnText2 = computed(() => props.cloosBtnText || t('confirm'))
const emits = defineEmits(['cloos', 'cancel', 'update:inputText']);
const handleInput = (value) => {
    emits('update:inputText', value); // 通知父组件更新
};
const cancel = () => {
    emits('cancel')
}
const cloos = () => {
    emits('cloos', props.inputText)
}
// 打开用户协议和隐私政策页面
const toAgreement = () => {
    uni.navigateTo({
        url: `/pages/agreementBook/agreement?title=${t('userAgreement')}&urlData=http://47.119.43.199/html2/userAgreement.html`,
    })
}
const toPolicy = () => {
    uni.navigateTo({
        url: `/pages/agreementBook/agreement?title=${t('privacyPolicy')}&urlData=http://47.119.43.199/html2/privacyPolicy.html`,
    })
}
</script>
<style scoped lang="scss">
::v-deep .u-modal {
    // width: 14rem !important;

    .u-modal__content {
        padding: 30rpx;
    }
}

.modalText {
    width: 100%;
    text-align: center;

    image {
        width: 240rpx;
        height: 240rpx;
    }

    .btnList {
        display: flex;
        justify-content: space-around;

        .u-button {
            max-width: 46%;
            min-width: 35%;
            color: #fff;
            border-radius: 10px;
            background-color: #de868f;
            border: 1px solid #bbbbbb;
        }
    }

    .inputBox {
        width: 80%;
        margin: 0 auto;
    }

    .agreementText {
        font-size: 28rpx;
        color: #717171;

        .textBtn {
            color: #E58F85;
        }
    }

    .textBox {
        font-size: 28rpx;
        color: #000;
    }
}
</style>